<template>
    <div class="box box_mm">
        <div class="box_main">
            <div class="search_box">
                <div style="display: flex; height: 100%">
                    <div
                        style="
                            margin-right: 30px;
                            display: flex;
                            align-items: center;
                        ">
                        <span style="width: 1.2rem">回收地点名称</span>
                        <el-input
                            v-model="search_name"
                            placeholder="请输入回收地点名称"
                            style="width: 2rem"
                            @keyup.enter="search"></el-input>
                    </div>
                    <div
                        style="
                            margin-right: 30px;
                            display: flex;
                            align-items: center;
                        ">
                        <span style="width: 1rem">回收点状态</span>

                        <el-select
                            v-model="search_type"
                            placeholder="请选择"
                            style="width: 1.5rem"
                            @change="search"
                            clearable>
                            <el-option label="正常" :value="1" />
                            <el-option label="禁用" :value="2" />
                            <el-option label="全部" :value="0" />
                        </el-select>
                    </div>
                    <div
                        style="
                            margin-right: 30px;
                            display: flex;
                            align-items: center;
                        ">
                        <span style="width: 0.6rem">所属市</span>
                        <el-select
                            style="width: 1.5rem"
                            @change="changcity"
                            v-model="search_city"
                            placeholder="请选择"
                            clearable>
                            <el-option
                                v-for="(item, index) in citylist"
                                :key="index"
                                :label="item.name"
                                :value="item.name" />
                        </el-select>
                    </div>
                    <div
                        style="
                            margin-right: 30px;
                            display: flex;
                            align-items: center;
                        ">
                        <span style="width: 0.6rem">所属区</span>
                        <el-select
                            style="width: 1.5rem"
                            @change="search"
                            v-model="search_areas"
                            placeholder="请选择"
                            clearable>
                            <el-option
                                v-for="(item, index) in arealist"
                                :key="index"
                                :label="item.name"
                                :value="item.name" />
                        </el-select>
                    </div>
                </div>
                <div class="search_item">
                    <el-button
                        type="primary"
                        class="btn_bgcolor"
                        @click="search"
                        >搜索</el-button
                    >
                    <el-button type="info" @click="reset">重置</el-button>
                    <el-button type="success" @click="addnew">新增</el-button>
                </div>
            </div>
            <div class="box_cont">
                <div class="btn_list">
                    <!-- <el-button class="mybtn btn_bgcolor" type="primary" @click="daochu">导出</el-button> -->
                </div>
                <div
                    class="mytabbox"
                    style="
                        height: 81vh;
                        padding-top: 10px;
                        box-sizing: border-box;
                    ">
                    <Table
                        :tableheader="tableheader"
                        :tabledata="tabledata"
                        ref="mytable"
                        czwidth="300px">
                        <template v-slot:btns="row">
                            <el-button
                                type="primary"
                                @click="detail(row.row)"
                                size="small"
                                style="margin-right: 0.1rem">
                                详情
                            </el-button>
                            <el-button
                                type="success"
                                @click="edit(row.row)"
                                size="small"
                                style="margin-right: 0.1rem">
                                修改
                            </el-button>
                            <el-button
                                @click="dongjie(row.row)"
                                type="warning"
                                size="small"
                                style="margin-right: 0.1rem">
                                {{ row.row.isdel == 1 ? "禁用" : "启用" }}
                            </el-button>
                            <el-button
                                @click="detelerow(row.row)"
                                type="danger"
                                size="small"
                                style="margin-right: 0.1rem">
                                删除
                            </el-button>
                        </template>
                    </Table>
                </div>
            </div>
        </div>

        <addinfo ref="tcbox"></addinfo>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, provide } from "vue";
import Table from "@/components/Table.vue";
import { post } from "../../../api/request";
import { ElMessage, ElMessageBox } from "element-plus";
import addinfo from "../base/huishou/addhuishou.vue";

//新增弹出----------

let tcbox = ref<any>(null);
const addnew = () => {
    tcbox.value.showflag = true;
};
//新增弹出end------------------

//详情-----------------------------
const detail = (row: any) => {
    post({
        url: "/api/hut/details",
        data: {
            id: row.row.hut_id,
        },
    }).then((res: any) => {
        tcbox.value.showflag = true;
        tcbox.value.isedit = false;
        tcbox.value.title = "站点详情";
        res.data.zuobiao = res.data.lon + "," + res.data.lat;
        Object.assign(tcbox.value.ruleForm, res.data);
    });
};
//详情end--------------------------

//修改-----------------------------
const edit = (row: any) => {
    post({
        url: "/api/hut/details",
        data: {
            id: row.row.hut_id,
        },
    }).then((res: any) => {
        tcbox.value.showflag = true;
        tcbox.value.isedit = true;
        tcbox.value.title = "编辑站点";
        res.data.zuobiao = res.data.lon + "," + res.data.lat;
        Object.assign(tcbox.value.ruleForm, res.data);
    });
};
//修改end--------------------------

//禁用----------------
const dongjie = (row: any) => {
    let texttip = row.row.isdel == 1 ? "您确定禁用该站点？" : "您确定启用该站点？";
    console.log(row.row);
    ElMessageBox.confirm(texttip, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        post({
            url: "/api/hut/edit",
            data: {
                hut_id: row.row.hut_id,
                isdel: row.row.isdel == 1 ? 2 : 1,
            },
        }).then((res: any) => {
            ElMessage.success("操作成功!");
            getdata();
        });
    });
};
//禁用end------------

//删除----------------
const detelerow = (row: any) => {
    ElMessageBox.confirm("确定删除该站点吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        post({
            url: "/api/hut/del",
            data: {
                ids: row.row.hut_id,
            },
        }).then((res: any) => {
            ElMessage.success("删除成功!");
            getdata();
        });
    });
};
//删除end-------------

//搜索字段
let search_name = ref("");
let search_type = ref(0);
let search_city = ref("");
let search_areas = ref("");

let citylist = ref([]);
let arealist = ref([]);
const changcity = (e: any) => {
    let id = citylist.value.find((item: any) => item.name == e)?.id;
    if (id) {
        post({
            url: "/api/area/index",
            data: {
                parent_id: id,
            },
        }).then((res: any) => {
            arealist.value = res.data.list;
        });
    }
    search();
};
// 在 onMounted 钩子中发送请求
onMounted(() => {
    post({
        url: "/api/area/index",
        data: {
            parent_id: 3021,
        },
    }).then((res: any) => {
        citylist.value = res.data.list;
    });
    getdata();
});

//定义表头的数据
const tableheader = ref([
    { key: "name", name: "回收地点名称", width: "" },
    { key: "contact", name: "联系人", width: "150" },
    { key: "telphone", name: "联系电话", width: "150" },
    {
        key: "isdel",
        name: "状态",
        width: "100",
        type: "tags",
        typedata: [
            { type: "success", value: 1, label: "正常" },
            { type: "danger", value: 2, label: "禁用" },
        ],
    },
    { key: "address", name: "详细地址", width: "" },    
    { key: "sort", name: "排序", width: "100" }
]);
//定义表格的数据
let tabledata = ref([]);

const mytable = ref({ currentp: 1 });

const getdata = () => {
    post({
        url: "/api/hut/index",
        data: {
            name: search_name.value, //搜索名称
            isdel: search_type.value, //搜索状态
            city: search_city.value, //搜索城市
            area: search_areas.value, //搜索区域
            p: mytable.value?.currentPage, //当前页数
            size: 15, //每页显示数量
        },
    }).then((res: any) => {
        mytable.value.total = res.data.count;
        tabledata.value = res.data.list;
    });
};
const search = () => {
    mytable.value.currentPage = 1;
    getdata();
};
const reset = () => {
    search_name.value = "";
    search_type.value = 0;
    search_city.value = "";
    search_areas.value = "";
    mytable.value.currentPage = 1;
    getdata();
};

provide("getdata", getdata);
</script>

<style lang="scss" scoped>
@import url("../index.scss");
</style>
